<template>
	<view>
		<u-navbar class="navbar" :border-bottom="false" :title="appealType==1?'仅退款':'退款退货'" :title-size="36" :title-bold="true" :title-color="textColor" :background="{backgroundColor: '#fff'}">
			
		</u-navbar>
		<!-- 商品信息 -->
		<view class="box-color show-animate  u-m-b-20" style="padding: 35rpx 35rpx 0rpx 35rpx;">
			<view class="u-flex u-p-b-20" v-for="info in itemShowList" :key="info.id">
				<view style="font-size: 0;">
					<image :src="info.url" style="width: 120rpx;height: 120rpx;border-radius: 10rpx;" mode=""></image>
				</view>
				<view class="u-m-l-20 u-flex-col u-row-around" style="height: 120rpx;flex: 1;">
					<text class="u-font-30">{{ info.itemName }}</text>
					<view class="u-flex ">
						<view class="grey-box u-m-r-20">
							{{ info.specification }}
						</view>
						<view class="grey-box">
							x{{ info.quantity }}
						</view>
					</view>
				</view>
			</view>
			<view v-if="itemlist.length>1" class="u-flex u-row-center u-col-center u-p-b-20" style="width: 100%;" @tap="isShowMore = !isShowMore">
				<text class="u-font-24 grey-color u-m-r-10">{{isShowMore?'收起':'展开全部'}}</text>
				<u-icon :name="isShowMore?'arrow-up-fill':'arrow-down-fill'" color="#999" size="20rpx"></u-icon>
			</view>
		</view>
		<!-- 退款信息 -->
		<u-cell-group class="u-m-b-20">
			<u-cell-item :title="appealType == 1?'退款信息':'退货信息'" :arrow="false" :border-bottom="false" :title-style="titleStyle" hover-class="none" style="height: 90rpx"></u-cell-item>
			<u-cell-item :value="resonValue" @click="openReasonShow()">
				<view slot="title">
					{{appealType == 1?'退款原因':'退货原因'}}<text style="color:#C30D23;">*</text>
				</view>
			</u-cell-item>
			<view class="u-p-35" v-if="resonValue == '其他'">
				<view class="u-p-20" style="background-color: #f8f8f8;">
					<textarea v-model="reason" style="width: 100%;height: 170rpx;"
						placeholder-style="font-size:30rpx;color: #CCCCCC;" placeholder="请输入其他原因" />
				</view>
				
			</view>
			<u-cell-item :arrow="false" :border-bottom="false">
				<view class="u-flex u-row-between">
					<text>退款金额<text style="color:#C30D23;">*</text></text>
					<input type="number" :max="maxAmount" v-model="amount" :name="String(maxAmount)" :style="{fontSize: '40rpx',color: badgeColor}" />
					<!-- <text style="font-size: 40rpx;" class="badge-color">{{ amount }}</text> -->
				</view>
				<view style="float: left;">
					<text class="u-font-26 grey-color">可修改，最多￥{{ maxAmount }}，请与卖家协商</text>
				</view>
			</u-cell-item>
		</u-cell-group>
		<!-- 补充凭证和描述 -->
		<view class="box-color box-padding">
			<text class="u-font-32 text-bold">补充描述和凭证<text style="color:#C30D23;">*</text></text>
			<textarea v-model="comments" style="width: 100%;margin-top: 60rpx;height: 170rpx;"
				placeholder-style="font-size:30rpx;color: #CCCCCC;" placeholder="补充描述，有助于更好的处理售后问题" />
			<u-upload
				ref="invoiceUploadRef"
				:action="baseUrl + 'api/Resource/UploadToOss'"
				:file-list="fileList"
				:header="headerToken"
				name="image"
				:custom-btn="true"
				:deletable="true"
				:show-progress="false"
				@on-success="onSuccess"
				width="140"
				height="140"
			>
			<view slot="addBtn" style="width: 140rpx;height: 140rpx;border-radius: 10rpx; background-color: #F8F8F8;display: flex;flex-direction: column;align-items: center;justify-content: center;">
					<u-icon name="plus" size="30" color="#CACACA" class="u-m-b-10"></u-icon>
					<text class="u-font-22 grey-color">上传凭证</text>
			</view>
			</u-upload>
		</view>
		<!-- 提交 -->
		<view style="margin-top: 100rpx;padding-left: 35rpx;padding-right: 35rpx;padding-bottom: 100rpx;">
			<u-button shape="circle" :hair-line="false" hover-class="none" :ripple="true" :custom-style="getBtStyle('default')" @click="handleSubmit">提交</u-button>
		</view>
		<!-- 退款原因 -->
		<u-action-sheet  :list="returnReson" v-model="returnShow" @click="resonClick"></u-action-sheet>
		<u-action-sheet  :list="refundReson" v-model="refundShow" @click="resonClick"></u-action-sheet>
	</view>
</template>

<script>
	import NumberBox from '@/components/number-box/index.vue'
	import { useUserStore } from '@/store/user.js';
	import { mapState } from 'pinia';
	export default {
		components: { NumberBox },
		data() {
			return {
				titleStyle: {
					fontSize: '32rpx',
					fontWeight: 'bold',
					color: this.textColor
				},
				fileList: [],
				annex: [],
				resonValue: '请选择',
				resonShow: false,
				returnShow:false,
				refundShow:false,
				returnReson: [
					{ id: 1, text: '卖家发错货' },
					{ id: 2, text: '其他' },
				],
				refundReson: [
					{ id: 3, text: '不想要了' },
					{ id: 4, text: '卖家未发货' },
					{ id: 5, text: '卖家未送达' },
					{ id: 6, text: '物流无记录' },
					{ id: 7, text: '商品破损/拒签' },
					{ id: 8, text: '退运费' },
					{ id: 9, text: '其他' },
				],
				returnReason: null,
				maxAmount: 0,
				amount: 0,
				info: {},
				comments: '',
				rules: [
					{ field: 'returnReason', message: '请选择退货原因' },
					{ field: 'comments', message: '请填写补充描述' },
					{ field: 'annex', message: '请上传凭证' },
				],
				itemlist:[],
				isShowMore:false,
				reason:'',
				appealType:0,
				tradeId:'',
			}
		},
		onLoad(option) {
			this.itemlist = JSON.parse(option.item);
			this.appealType  = Number(option.type)+1;
			let amount = 0;
			if(this.itemlist.length>1){
				let that = this;
				amount = this.itemlist.reduce((amout,obj)=>{
					return amout += that.$mHelper.mul(obj.quantity,obj.price)
				},0);
			}else{
				amount = this.$mHelper.mul(this.itemlist[0].quantity,this.itemlist[0].price);
			}
			this.amount = amount;
			this.maxAmount = amount;
			this.tradeId = option.id;
		},
		computed:{
			itemShowList(){
				let newAry = [];
				if(this.isShowMore){
					newAry = this.itemlist;
				}else{
					newAry = this.itemlist.slice(0,1);
				}
				return newAry;
			},
			...mapState(useUserStore, ['headerToken'])
		},
		methods: {
			// async getActuallyPrice() {
			// 	const res = await this.$http.get('api/AfterSale/GetActuallyPrice', { params: { tradeOrderItemId: this.info.id } })
			// 	this.price = res
			// 	this.amount = this.price * this.info.quantity
			// 	this.maxAmount = this.amount
			// },
			openReasonShow(){
				if(this.appealType == 1){
					this.refundShow = true;
				}else{
					this.returnShow = true;
				}
			},
			// 图片上传成功触发
			onSuccess(data) {
				this.annex.push(data.data[0].id)
			},
			goodsClick(index) {
				this.goodsValue = this.goodsList[index].text
			},
			resonClick(index) {
				console.log(index);
				this.resonValue =this.appealType == 1? this.refundReson[index].text:this.returnReson[index].text
				this.returnReason =this.appealType == 1? this.refundReson[index].id:this.returnReson[index].id 
			},
			async handleSubmit() {
				const flag = this.showMessage()
				if (!flag) return;
				if(this.amount>this.maxAmount){
					this.$u.toast(`最大退款金额为${this.maxAmount},请重新输入退款金额`);
					return false;
				}
				if(this.reasonValue === '其他'&&this.reason === ''){
					this.$u.toast('退款原因为其他的时候，退款原因描述不得为空~');
					return false;
				}
				let items = this.itemlist.map(item=>{return {quantity:item.quantity,tradeOrderItemId:item.id,tradeId:this.tradeId}});
				let attachments = this.annex.map(item=>{return {id:item}})
				const data = {
					afterSalesType: this.appealType, // 退货
					tradeId: this.tradeId,
					applicantRemarks:this.comments,
					amount:this.amount,
					attachments:attachments,
					afterSalesItems:items,
					reason: this.resonValue =='其他'?this.reason:this.resonValue
				}
				// console.log(data)
				const res = await this.$http.post('api/v1.3/AfterSalesOrder/Create', data)
				this.$u.toast('提交成功', 1000, 'success')
				this.$mHelper.delayedJump('/pages/purchase/index', 'switchTab')
			},
			// 提示消息
			showMessage() {
				let flag = true
				for (let i = 0; i < this.rules.length; i++) {
					if (!this[this.rules[i].field] || this[this.rules[i].field].length == 0) {
						flag = false
						this.$u.toast(this.rules[i].message)
						break
					}
				}
				return flag
			}
		}
	}
</script>

<style lang="scss" scoped>
	.show-animate{
		transition: height 1s;
	}
</style>
